<script setup>
import { ref,onMounted } from 'vue'
import {getAllAnnouncements} from '@/api/announcement'
const items=ref([])
onMounted(async()=>{
    const res=await getAllAnnouncements();
    const itemData=res.data.data
    //格式化公告发布时间
    itemData.forEach(element => {
        const itemDate=element.createTime
        const LocalDate=`${itemDate[0]}-${itemDate[1]}-${itemDate[2]}`
        element.createTime=LocalDate
    });
    items.value=itemData
})
const items2 = ref([
  '/src/assets/announcement/announcement01.jpg',
  '/src/assets/announcement/announcement02.jpg',
  '/src/assets/announcement/announcement03.jpg',
  '/src/assets/announcement/announcement04.jpg',
  '/src/assets/announcement/announcement05.jpg',
  '/src/assets/announcement/announcement06.jpg',
  // 更多公告...
])
</script>

<template>
    
    <!-- <el-card class="annCard"> -->
    <div class="annCard">
        <el-carousel :interval="2000" type="card" height="100px">
            <el-carousel-item v-for="(item,index) in items2" :key="index">
                <img :src="item" style="width: 100%; height: 100%; object-fit: cover;object-position: 20%;">
            </el-carousel-item>
        </el-carousel>
        <el-card class="announcement-board">
            <template #header>
                <span>公告栏</span>
            </template>
            <el-timeline>
                <el-timeline-item v-for="item in items" :key="item.id" :timestamp="item.createTime" placement="top">
                    <el-card>
                        <h4>{{ item.title }}</h4>
                        <p>{{ item.content }}</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </el-card>

    </div>

    <!-- </el-card> -->
</template>

<style lang="scss">
.annCard {
    width: 100%;
    height: 100%;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 100px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>